<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基于js的星级评分</title>
		<style>

			.starts ul{
				float:left;
				padding: 2px 10px;
			}
			.starts ul li{
				list-style: none;
				width:32px;
				height:21px;
				float:left;
				background:url(images/starky.png) no-repeat;
				
			}
			.starts ul li.on{
				background:url(images/starsy.png) no-repeat;
			}
			.starts ul span{
				display:inline;
				float:left;
				padding-left:10px;
				height:21px;
				line-height:21px;
			}
			.starts{
				height: 60px;
				display: inline-block;
			}
			.pf_body{
				width: 500px;
				margin: 0 auto;
			}
			.pf_body .form_input{
				width: 500px;
				margin: 0 auto;
			}
			.pf_body .pf_title{
				display: inline-block;
				line-height: 60px;
				vertical-align: top;
			}
			.pf_body .pf_textarea{
				border: 1px solid #e5e5e5;
				padding: 10px;
				height: 100px;
				width: 500px;
			}
			.pf_body .pf_button{
				border: 0;
				height: 50px;
				width: 150px;
				background-color: #4680b6;
				color: #ffffff;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>

		<div class="pf_body">
			<h3>课程评分</h3>

			<div class="form_input">
				<div class="pf_title">评分</div>
				<div class="starts">
					<ul id = "pingStar">
						<li rel = "1" title = "差评"></li>
						<li rel = "2" title = "差评"></li>
						<li rel = "3" title = "中评"></li>
						<li rel = "4" title = "好评"></li>
						<li rel = "5" title = "好评"></li>
						<span id="dir"></span>
					</ul>
					<input type="hidden" value="" id = "startP" />
				</div>
			</div>


			<h3>输入您的评论</h3>

			<textarea class="pf_textarea" placeholder="请输入您的评价"></textarea>


			<button class="pf_button">提交</button>
		</div>




		<script>
			window.onload = function(){
				var s = document.getElementById("pingStar");
				    m = document.getElementById("dir"),
				    n = s.getElementsByTagName("li"),
				    input = document.getElementById("startP");//保存所选值
				clearAll = function(){
					for(var i = 0;i < n.length;i++){
						n[i].className = "";
					}
				}
				for(var i = 0;i < n.length;i++){
					n[i].onclick = function(){
						var q = this.getAttribute("rel");
						clearAll();
						input.value = q;
						for(var i = 0;i < q;i++){
							n[i].className = "on";
						}
						m.innerHTML = this.getAttribute("title");
					}
					n[i].onmouseover = function(){
						var q = this.getAttribute("rel");
						clearAll();
						for(var i = 0;i < q;i++){
							n[i].className = "on";
						}
						m.innerHTML = this.getAttribute("title");
					}
					n[i].onmouseout = function(){
						clearAll();
						for(var i = 0;i < input.value;i++){
							n[i].className = "on";
						}
						
					}
				}
			}
			
		</script>
	</body>
</html>
